<template>
  <div class="my-learning-page">
    <nav-bar></nav-bar>
    <div class="my-learning-content">
      <div class="page-header">
        <h1>我的学习</h1>
        <div class="learning-tabs">
          <div 
            v-for="(tab, index) in tabs" 
            :key="index"
            class="tab"
            :class="{ active: currentTab === tab.name }"
            @click="currentTab = tab.name"
          >
            {{ tab.name }}
          </div>
        </div>
      </div>
      
      <div class="learning-container">
        <div class="section">
          <div class="courses-grid">
            <template v-if="currentCourses.length">
              <div class="course-card" v-for="course in currentCourses" :key="course.title">
                <div class="course-info">
                  <div class="course-header">
                    <span class="instructor-name">{{ course.instructor }}</span>
                  </div>
                  <h3 class="course-title">{{ course.title }}</h3>
                  <div class="course-progress">
                    <div class="progress-bar">
                      <div class="progress" :style="{ width: calculateProgress(course) + '%' }"></div>
                    </div>
                    <span class="progress-text">{{ calculateProgress(course) }}%</span>
                  </div>
                  <button class="continue-btn" @click="continueLearning(course)">{{ course.buttonText || '继续' }}</button>
                </div>
              </div>
            </template>
            <div v-else class="empty-state">
              <p>暂无{{ currentTab }}的课程</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.courses-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.course-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  background: white;
}

.course-header {
  margin-bottom: 15px;
}

.instructor-name {
  font-size: 14px;
  color: #666;
}

.course-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  line-height: 1.4;
}

.course-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.progress-bar {
  flex: 1;
  height: 4px;
  background: #f3f4f6;
  border-radius: 2px;
}

.progress {
  height: 100%;
  background: #6d28d2;
  border-radius: 2px;
}

.progress-text {
  font-size: 14px;
  color: #666;
  min-width: 45px;
}

.continue-btn {
  padding: 8px 20px;
  background: #6d28d2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.continue-btn:hover {
  opacity: 0.9;
}

.learning-tabs {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.tab {
  padding: 8px 24px;
  cursor: pointer;
  color: #666;
  font-weight: 500;
  background: #f3f4f6;
  border-radius: 20px;
  transition: all 0.3s;
}

.tab.active {
  background: #6d28d2;
  color: white;
}

.section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
</style>

<script>
import NavBar from '@/components/NavBar.vue'

export default {
  name: 'MyLearningView',
  components: {
    NavBar
  },
  data() {
    return {
      currentTab: '正在进行',
      tabs: [
        { name: '正在进行' },
        { name: '已完成' }
      ],
      courses: {
        '正在进行': [],
        '已完成': []
      }
    }
  },
  created() {
    // 从localStorage获取学习课程列表
    this.loadCoursesFromStorage();
  },
  computed: {
    currentCourses() {
      return this.courses[this.currentTab] || []
    }
  },
  methods: {
    loadCoursesFromStorage() {
      // 从localStorage获取学习课程列表
      const storedCourses = JSON.parse(localStorage.getItem('learningCourses'));
      if (storedCourses) {
        this.courses = storedCourses;
      }
    },
    continueLearning(course) {
      // 跳转到课程详情页，并传递课程ID和上次学习的章节信息
      this.$router.push({
        path: '/course',
        query: { 
          id: course.id,
          chapterIndex: course.lastChapter,
          lessonIndex: course.lastLesson
        }
      });
    },
    calculateProgress(course) {
      // 如果课程没有章节信息，返回0
      if (!course.chapters) return 0;
      
      // 计算总课程数
      let totalLessons = 0;
      let completedLessons = 0;
      
      course.chapters.forEach((chapter, chapterIndex) => {
        totalLessons += chapter.lessons.length;
        
        // 如果当前章节索引小于上次学习的章节索引，则该章节的所有课程都已完成
        if (chapterIndex < course.lastChapter) {
          completedLessons += chapter.lessons.length;
        } 
        // 如果是当前正在学习的章节，则计算已完成的课程数
        else if (chapterIndex === course.lastChapter) {
          completedLessons += course.lastLesson;
        }
      });
      
      // 计算进度百分比
      return totalLessons > 0 ? Math.round((completedLessons / totalLessons) * 100) : 0;
    }
  }
}
</script>